<template>
	<div>
		<div class="head">
			<a @click="$router.back(-1)" class="return"></a>
			详情
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' '>
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
						<div class="weui-cells measure">
							<div v-for="(item,index) in list" :key="item.create_time">
								<div class="weui-flex">
									<div class="weui-flex__item" style="padding-left: 10px;">
										<span v-if="item.tradeType == 1">买入数量：</span>
										<span v-if="item.tradeType == 2">卖出数量：</span>
										<span v-text="item.actualNum"></span>
									</div>
								</div>
								<div class="weui-cell">
									<div class="weui-cell__hd">
										<i class="rise" v-if="item.tradeType == 1">买</i>
										<i class="fall" v-if="item.tradeType == 2">卖</i>
									</div>
									<div class="weui-cell__bd">
										<div>ATM单价(AIDT)</div>
										<p style="font-size: 12px;" v-text="item.price">暂无</p>
									</div>
									<div class="weui-cell__bd" v-if="item.tradeType == 1">
										<div>交易总额(AIDT)</div>
										<p style="font-size: 12px;" v-text="item.num">暂无</p>
									</div>
									<div class="weui-cell__bd" v-if="item.tradeType == 2">
										<div>交易总额(ATM)</div>
										<p style="font-size: 12px;" v-text="item.num">暂无</p>
									</div>
									<div class="time tac" style="width: 25%;">
										<span v-text="item.createTime"></span>
									</div>
								</div>
							</div>
						</div>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script>
	import { money } from './../utils/api';
	export default {
		data() {
			return {
				list: [],
				isLoading: false,
				finished: false,
				loading: false,
				listLength: 0,
				total: 0,
				size: 10,
				current: 1
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			getGain() { // 涨幅榜详情
				money.getMemberBuyOrSellInfo({
					"typeId": this.$route.query.trade_type,
					"currencies": '',
					"current": this.current,
					"size": this.size,
					"time": this.$route.query.create_time
				}).then(res => {
					this.list = res.data.records;
					this.listLength = res.data.records.length;
					this.total = res.data.total;
				})
			},
			onRefresh() {
				this.getGain();
				setTimeout(() => {
					this.$toast({
						duration: 800,
						message: '刷新成功'
					});
					this.isLoading = false;
				}, 500);
			},
			onLoad() { // 上拉加载
				this.getGain();
				// 异步更新数据
				setTimeout(() => {
					if(this.total > this.listLength) {
						this.size += 10;
						this.loading = false;
					} else {
						// 加载状态结束
						this.finished = true;
						this.loading = false;
					}
				}, 500);
			},
		}
	}
</script>

<style lang="less" scoped>
	.weui-cell:before {
		border-top: 1px solid #393958;
	}
	
	.measure {
		font-size: 12px;
		color: #9ca5c6;
		.weui-flex {
			padding: 10px;
		}
		i {
			font-size: 14px;
			display: block;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 50%;
			color: #fff;
			margin-right: 10px;
		}
		p {
			font-size: 14px;
			color: #fff;
		}
		.time {
			color: #fff;
		}
	}
</style>